import React, { Component } from 'react'
import img1 from '../../../../../images/jiangxue.png'
import img2 from '../../../../../images/jiangfan.jpg'
import img3 from '../../../../../images/ujsComputer.jpg'
import img4 from '../../../../../images/IRIS.jpg'
import img5 from '../../../../../images/OKbang.jpg'
import img6 from '../../../../../images/hongbaoRabit.jpg'
import CircleIndicate from './CircleIndicate'
import ImageShow from './ImageShow'

const imgData = [
    {
        img: img1,
        decoration: '江雪'
    },
    {
        img: img2,
        decoration: '江帆'
    },
    {
        img: img3,
        decoration: '江苏大学计算机官网'
    },
    {
        img: img4,
        decoration: 'IRIS'
    },
    {
        img: img5,
        decoration: 'OK帮'
    },
    {
        img: img6,
        decoration: '红包兔'
    },
]

export default class ThreeContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            turnIndex: 0, // 轮播索引
            isMouse: new Array(2).fill(false), // 箭头触摸效果，用于显示箭头背景
            isClear: false,
            isMouseCarousel: false, // 是否触摸轮播模块,用于显示箭头
            allowCarousel: true, // 是否允许轮播，用于清除定时器
        }
    }

    // 图片轮播
    turn = () => {
        let { turnIndex } = this.state;
        turnIndex++;
        if (turnIndex === imgData.length) {
            turnIndex = 0;
        }
        this.setState({
            turnIndex
        });
    }

    // 处理箭头模块显示
    handleMouseOver = (index) => {
        let { isMouse } = this.state;
        isMouse[index] = true;
        this.setState({
            isMouse
        });
    }

    handleMouseOut = () => {
        let isMouse = new Array(2).fill(false);
        this.setState({
            isMouse
        });
    }

    handleLeftArrow = () => {
        let { turnIndex } = this.state;
        turnIndex--;
        if (turnIndex === -1) {
            turnIndex = imgData.length - 1;
        }

        this.setState({
            turnIndex
        });
    }

    handleRightArrow = () => {
        let { turnIndex } = this.state;
        turnIndex++;
        if (turnIndex === imgData.length) {
            turnIndex = 0;
        }

        this.setState({
            turnIndex
        });
    }

    handleClearInterval = () => {
        this.setState({
            isClear: false,
            isMouseCarousel: false
        });
    }

    handleSetInterval = () => {
        this.setState({
            isClear: true,
            isMouseCarousel: true
        });
    }

    handleChangePage = (index) => {
        this.setState({
            turnIndex: index
        });
    }

    // 增加轮播的次数，避免轮播停止，停止轮播
    handleReduceCount = () => {
        if (!this.state.allowCarousel) {
            this.setState({
                allowCarousel: true
            });
            clearInterval(this.play);
        }
    }

    // 减少轮播次数，避免轮播重复，轮播开始
    handleAddCount = () => {
        if (this.state.allowCarousel) {
            this.play = setInterval(() => {
                this.turn()
            }, 8000);
            this.setState({
                allowCarousel: false
            });
        }
    }
    // 组件即将销毁
    componentWillUnmount() {
        clearInterval(this.play);
    }


    render() {
        if (this.state.isClear) {
            this.handleReduceCount();
        } else {
            this.handleAddCount();
        }

        let item = [];

        for (var i = 0; i < imgData.length; i++) {
            item.push(
                <CircleIndicate
                    key={i}
                    index={i}
                    turnIndex={this.state.turnIndex}
                    handleChangePage={this.handleChangePage}
                />
            );
        }

        return (
            <div style={{
                paddingTop: 50,
                width: 1200,
                margin: '0 auto',
                position: 'relative',
                height: 900
            }}>
                <div style={{
                    textAlign: 'center',
                    fontSize: 40
                }}>作品展览</div>
                <div style={{
                    marginTop: 20,
                    textAlign: 'center',
                    fontSize: 20,
                    color: 'grey',
                    marginBottom: 40
                }}>
                    一群热爱技术的人的作品
                </div>
                <div
                    style={{
                        width: 1200,
                        position: 'relative',
                        left: '50%',
                        marginLeft: -600,
                        height: 600,
                        overflow: 'hidden'
                    }} className="removeFloat"
                    onMouseOver={this.handleSetInterval}
                    onMouseOut={this.handleClearInterval}
                >
                    {
                        imgData.map((item, index) => {
                            return (
                                <ImageShow
                                    img={item.img}
                                    key={index}
                                    decoration={item.decoration}
                                    index={index}
                                    turnIndex={this.state.turnIndex}
                                />
                            )
                        })
                    }
                    {/* 左侧遮罩层 */}
                    <div
                        style={{
                            backgroundColor: (this.state.isMouse[0] ? '#000' : 'transparent'),
                            opacity: (this.state.isMouse[0] ? 0.3 : 1),
                            position: 'absolute',
                            height: 80,
                            top: '50%',
                            marginTop: -40,
                            width: 50,
                            zIndex: 100,
                        }}
                        onMouseOver={() => this.handleMouseOver(0)}
                        onMouseOut={this.handleMouseOut}
                    >
                    </div>
                    {/* 右侧遮罩层 */}
                    <div
                        style={{
                            backgroundColor: (this.state.isMouse[1] ? '#000' : 'transparent'),
                            opacity: (this.state.isMouse[1] ? 0.3 : 1),
                            position: 'absolute',
                            zIndex: 100,
                            height: 80,
                            top: '50%',
                            width: 50,
                            marginTop: -40,
                            right: 0
                        }}
                        onMouseOver={() => this.handleMouseOver(1)}
                        onMouseOut={this.handleMouseOut}
                    >
                    </div>
                    {/* 左箭头 */}
                    <span
                        className="anticonzuotubiao"
                        style={{
                            fontSize: 50,
                            marginTop: -25,
                            zIndex: 101,
                            position: 'absolute',
                            top: '50%',
                            display: (this.state.isMouseCarousel ? 'block' : 'none')
                        }}
                        className="removeFloat"
                        onMouseOver={() => this.handleMouseOver(0)}
                        onMouseOut={this.handleMouseOut}
                        onClick={this.handleLeftArrow}
                    ></span>
                    {/* 右箭头 */}
                    <span
                        className="anticonyou removeFloat"
                        style={{
                            fontSize: 50,
                            zIndex: 101,
                            position: 'absolute',
                            right: 0,
                            top: '50%',
                            marginTop: -25,
                            display: (this.state.isMouseCarousel ? 'block' : 'none')
                        }}
                        onMouseOver={() => this.handleMouseOver(1)}
                        onMouseOut={this.handleMouseOut}
                        onClick={this.handleRightArrow}
                    ></span>
                </div>
                <div style={{
                    height: 30,
                    width: (imgData.length * 60),
                    margin: '40px auto',
                    display: 'flex',
                    justifyContent: 'space-between'
                }}>
                    {item}
                </div>
            </div>
        )
    }
}
